<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="title">
				<view class="goback" @click="goback">
					<image src="../../static/组 2457.png"></image>
				</view>
				<text>心动信号</text>
			</view>
		</view>
		<view class="gifts position-fixed bg-fff" :style="{'top': titleTop, 'z-index': '999'}">
			<view :class="['received', ctype == 0? 'current' : '']" @click="changType(0)">我搭的</view>
			<view :class="['sendOut', ctype == 1? 'current' : '']" @click="changType(1)">我搭的</view>
		</view>
		<view class="JoinInList" v-if="ctype == 0">
			<view class="item" v-for="i in 12" :key="i.id">
				<view class="info">
					<view class="icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
						<view class="sex">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
						</view>
					</view>
					<view class="detailed">
						<view class="name d-flex d-flex-middle">
							<view class="mr-2">7737.摇光</view>
							<view class="font22 rounded10" style="color: #FF9645; background: #f4e2c4; padding: 4rpx 12rpx;">新的信号</view>
						</view>
						<view class="desc">武汉 · 24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="font24 mr-3" style="color: #595757;">09月22日</view>
			</view>
		</view>
		<view class="" v-if="ctype == 1" style="margin-top: 340rpx;">
			<view class="d-flex d-flex-middle font-bold px-4">
				<view class="font32" style="color: #5DB0FE;">43</view>
				<view class="font32 mr-1">人喜欢了我</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20730.png" style="width: 36rpx; height: 36rpx;"></image>
			</view>
			<view class="pl-4 font26 pt-2">解锁喜欢你的人,即刻匹配</view>
			<view class="px-4 mt-2 mb-4 d-flex d-flex-between d-flex-wrap">
				<view class="position-relative span-48 rounded40 mb-2"  v-for="i in buddyList" :key="i.id" :style="{'background': i.topBg,'height': '390rpx', 'overflow': 'hidden'}">
					<view class="colorfff font24 mt-2 ml-2  px-1 rounded15" style="background: rgba(62, 58, 57, .2); display: inline-block; line-height: 46rpx;">{{i.title}}</view>
						<view class="position-absolute d-flex" :style="{'width': '100%', 'height': '50%', 'background': i.bottomBg, 'bottom': '0', 'borderRadius': '30rpx 30rpx 0 0'}">
						<view class="d-flex d-flex-between" style="width: 100%; margin-top: 90rpx;">
							<view class="ml-2">
								<view class="font26 ">30分钟前在线</view>
								<view class="d-flex mt-1">
									<view class="d-flex-btn" style="background: #B73DE3; padding: 0 8rpx 0 8rpx; border-radius: 10rpx 0 0 10rpx;">
										<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 26rpx; height: 18rpx;"></image>
									</view>
									<view class="font22" style="background: #ec92d0; color: #B73DE3; padding: 6rpx 12rpx 4rpx 6rpx; border-radius: 0 10rpx 10rpx 0;">最强王者</view>
								</view>
							</view>
							<view class="d-flex-column d-flex-middle" style="margin-top: 6rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" style="width: 46rpx; height: 46rpx;"></image>
								<text class="font20 font-bold">ENTG</text>
							</view>
							<view class="mt-2 mr-1">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202778.png" style="width: 50rpx; height: 45rpx;"></image>
							</view>
						</view>
						<image class="position-absolute rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png" style="width: 160rpx; height: 160rpx; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%); border: 1px solid #fff;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				ctype: 0,
				buddyList: [
					{
						id: 0,
						topBg: 'linear-gradient( 90deg, #D951C6 1%, #FB9AB0 100%);',
						bottomBg: 'linear-gradient( 180deg, #FFCDF7 1%, #FB9AB0 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 1,
						topBg: 'linear-gradient( 90deg, #5DB0FE 1%, #86F5C9 100%);',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 2,
						topBg: ' #FFCC7B;',
						bottomBg: 'linear-gradient(180deg, #FEE080 1%, #FEE080 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 3,
						topBg: 'linear-gradient(90deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%);',
						bottomBg: 'linear-gradient(180deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #EFEFEF 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 4,
						topBg: '#D83F7D;',
						bottomBg: 'linear-gradient(180deg, #FFCDF7 1%, #FB9AB0 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 5,
						topBg: '#63C6B3;',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%);',
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					}
				]
			}
		},
		methods: {
			changType(type){
				this.ctype = type
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		computed: {
			titleTop() {
				return this.$store.state.statusBarHeight + 40 + 'px'
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.gifts {
		width: 100%;
		padding: 50rpx 0 15rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9B9B9B;
		font-size: 34rpx;
		.received,.sendOut {
			padding: 10rpx 18rpx;
			border-radius: 20px;
			margin-right: 40rpx;
		}
		.sendOut {
			margin-left: 40rpx;
			margin-right: 0;
		}
		.current {
			background: linear-gradient(to right, #EC69CF, #60AFFE);
			margin-left: 20rpx;
			padding: 10rpx 30rpx;
			color: #fff;
		}
	}
	.JoinInList {
		width: 730rpx;
		margin: 300rpx auto 0;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 150rpx;
			margin: 30rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				margin-left: 20rpx;
				.icon {
					position: relative;
					image {
						width: 152rpx;
						height: 152rpx;
					}
					.sex {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						margin: 10rpx 0 4rpx;
						color: #231815;
						font-weight: 700;
						font-size: 30rpx;
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
			.btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-right: 50rpx;
				background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 21.23rpx;
					height: 20.16rpx;
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
